<template>
	<view class="content">
		<view class="addressBox">
			<view class="left">
				<view class="ji">寄</view>
				<view class="line"></view>
				<view class="shou">收</view>
			</view>
			<view class="right">
				<view class="address" v-if="dataInfo.send_address">
					<view class="add-top">
						<text>{{dataInfo.send_address.name}}</text>
						<text style="margin-left: 40rpx;">{{dataInfo.send_address.phone}}</text>
					</view>
					<view class="add-bottom">
						{{dataInfo.send_address.province}}-{{dataInfo.send_address.city}}-{{dataInfo.send_address.district}}-{{dataInfo.send_address.detail}}
					</view>
				</view>
				<view class="lines"></view>
				
				<view class="address" v-if="dataInfo.receive_address">
					<view class="add-top">
						<text>{{dataInfo.receive_address.name}}</text>
						<text style="margin-left: 40rpx;">{{dataInfo.receive_address.phone}}</text>
					</view>
					<view class="add-bottom">
						{{dataInfo.receive_address.province}}-{{dataInfo.receive_address.city}}-{{dataInfo.receive_address.district}}-{{dataInfo.receive_address.detail}}
					</view>
				</view>
			</view>
		</view>
	
		<view class="orderInfo">
			<view class="inps">
				<view class="key">订单状态</view>
				<view class="value" v-if="dataInfo.yida">
					<view v-if="dataInfo.pay_status=='no_need'||dataInfo.pay_status=='paid'">
						<view class="status" v-if="dataInfo.status=='uncollected'">待取件</view>
						<view class="status" v-if="dataInfo.status=='collected'">已取件</view>
						<view class="status" v-if="dataInfo.status=='shipped'">运输中</view>
						<view class="status" v-if="dataInfo.status=='received'">已签收</view>
						<view class="status" v-if="dataInfo.status=='canceled'">已取消</view>
						<view class="status" v-if="dataInfo.status=='abnormal'">异常状态</view>
					</view>
					<!-- <view class="status" v-if="dataInfo.pay_status=='unpaid'">未支付</view> -->
					<view v-if="dataInfo.pay_status=='unpaid'">
						<view class="status" v-if="dataInfo.status=='canceled'">已取消</view>
						<view class="status" v-else>未支付</view>
					</view>
					<view class="status" v-if="dataInfo.pay_status=='supplementary'">代补缴</view>
				</view>
			</view>
			<view class="inps">
				<view class="key">运单号</view>
				<view class="value" v-if="dataInfo.yida">
					{{dataInfo.yida.delivery_id||'-'}}
					<image src="../../static/image/copy.png" @click="copyBtn(dataInfo.yida.delivery_id||'')" class="copy" mode=""></image>
				</view>
			</view>
			<view class="inps">
				<view class="key">快递员姓名</view>
				<view class="value" v-if="dataInfo.yida">
					{{dataInfo.yida.courier_name||'-'}}
					<!-- <image src="../../static/image/mine.png" @click="copyBtn(dataInfo.order_no||'')" class="copy" mode=""></image> -->
				</view>
			</view>
			<view class="inps" @tap="callBtn(dataInfo.yida.courier_phone||'-')">
				<view class="key">快递员电话</view>
				<view class="value" v-if="dataInfo.yida">
					{{dataInfo.yida.courier_phone||'-'}}
					<image src="../../static/image/lxwm.png" @click="callBtn(dataInfo.yida.courier_phone||'-')" class="copy" mode=""></image>
				</view>
			</view>
			<view class="inps">
				<view class="key">商家单号</view>
				<view class="value">
					{{dataInfo.order_no}}
					<image src="../../static/image/copy.png" @click="copyBtn(dataInfo.order_no||'')" class="copy" mode=""></image>
				</view>
			</view>
			<view class="inps">
				<view class="key">配送公司</view>
				<view class="value">
					{{dataInfo.delivery_business_name}}
				</view>
			</view>
			<view class="inps">
				<view class="key">包裹信息</view>
				<view class="value">
					{{dataInfo.goods_name}}
				</view>
			</view>
			<view class="inps">
				<view class="key">包裹重量</view>
				<view class="value">
					{{dataInfo.weight}}/kg
				</view>
			</view>
			<view class="inps">
				<view class="key">包裹数量</view>
				<view class="value">
					{{dataInfo.package_count}}
				</view>
			</view>
			<view class="inps">
				<view class="key">长x宽x高</view>
				<view class="value">
					<view v-if="dataInfo.volume_long&&dataInfo.volume_width&&dataInfo.volume_height">
						{{dataInfo.volume_long}}-{{dataInfo.volume_width}}-{{dataInfo.volume_height}}
					</view>
					<view v-else>-</view>
					
				</view>
			</view>
			<view class="inps">
				<view class="key">保价金额</view>
				<view class="value">
					{{dataInfo.insured_amount}}
				</view>
			</view>
			<!-- <view class="inps">
				<view class="key">保价费用</view>
				<view class="value">
					YT567887657876776
				</view>
			</view> -->
			<view class="inps">
				<view class="key">包裹费用</view>
				<view class="value">
					{{dataInfo.total_price}}
				</view>
			</view>
			<view class="inps">
				<view class="key">期望上门时间</view>
				<view class="value">
					{{dataInfo.pickup_start_time}}-{{dataInfo.pickup_end_time}}
				</view>
			</view>
			<view class="inps">
				<view class="key">备注</view>
				<view class="value">
					{{dataInfo.remark||'-'}}
				</view>
			</view>
			<view class="inps">
				<view class="key">下单时间</view>
				<view class="value">
					{{dataInfo.created_at||'-'}}
				</view>
			</view>
		</view>
		<view class="btns">
			
			<view class="btn" v-if="dataInfo.pay_status=='unpaid'&&dataInfo.status!='canceled'" @click="pay">支付</view>
			<view class="btn" v-if="dataInfo.pay_status=='supplementary'" @click="pay">补缴</view>
			<view class="btn" v-if="dataInfo.status=='uncollected'" @click="cancel">取消订单</view>
			<view class="btn" style="background:#1AA261;color:#fff;" @click="goInfo('/pages-send/workOrderSubmit/workOrderSubmit?orderId='+dataInfo.id)">提交工单</view>
		</view>
		
		<payPopup v-if="payShow" :totalPrice="total_price" :orderNo="orderNo" @empty="empty"></payPopup>
	</view>
</template>

<script>
	import {orderInfo,orderDel} from '../../common/api.js'
	import payPopup from '../../components/pay/pay.vue'
	export default {
		components:{payPopup},
		data() {
			return {
				dataInfo:{},
				
				payShow:false,
				total_price:'',
				orderNo:'',
			}
		},
		onLoad(e) {
			this.getInfo(e.id)
		},
		methods: {
			getInfo(id){
				orderInfo({id}).then(res=>{
					console.log(res)
					if(res.code==10000){
						this.dataInfo = res.data
					}
				})
			},
			pay(){
				this.payShow=true
				this.orderNo = this.dataInfo.id
				this.total_price = this.dataInfo.need_pay
			},
			empty(){
				this.payShow=false
				this.orderNo = ''
				this.total_price = ''
				setTimeout(()=>{
					uni.navigateBack({
						delta: 1
					});
					
				},500)
			},
			cancel(){
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否确认取消改订单?',
					success: function (res) {
						if (res.confirm) {
							orderDel({id:that.dataInfo.id}).then(res=>{
								if(res.code==10000){
									uni.showToast({
										title: '取消成功',
										duration: 2000,
										icon:"none"
									});
									setTimeout(()=>{
										uni.reLaunch({
											url: '/pages/order/order'
										});
									},500)
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
			},
			copyBtn(num){
				uni.setClipboardData({
					data: num,
					success: function () {
						console.log('success');
					}
				});
			},
			goInfo(url){
				uni.navigateTo({
					url:url
				})
			},
			callBtn(phone){
				uni.makePhoneCall({
					phoneNumber: phone //仅为示例
				});
			}
		}
	}
</script>
<style>
	page{
		background: #EDEFF2;
	}
</style>
<style scoped lang="scss">
.content{
	width: 750rpx;
	padding: 32rpx;
	box-sizing: border-box;
	.addressBox{
		width: 100%;
		height: 333rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 56rpx 40rpx;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		.left{
			width: 40rpx;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			.ji{
				width: 40rpx;
				height: 40rpx;
				background: #1AA261;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #FFFFFF;
				line-height: 20rpx;
				text-align: center;
				font-style: normal;
				line-height: 40rpx;
				border-radius: 50%;
			}
			.line{
				// width: 2rpx;
				margin: 16rpx 0;
				height: 78rpx;
				border-right: 4rpx dotted;
				border-image: linear-gradient(180deg, rgba(26, 162, 97, 1), rgba(35, 144, 227, 1)) 2 2;
				
			}
			.shou{
				width: 40rpx;
				height: 40rpx;
				background: #2390E3;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #FFFFFF;
				line-height: 20rpx;
				text-align: center;
				font-style: normal;
				line-height: 40rpx;
				border-radius: 50%;
			}
		}
		.right{
			width: calc(100% - 32rpx - 40rpx);
			margin-left: 32rpx;
			.lines{
				width: 100%;
				border-bottom: 1rpx solid #D8D8D8;
				margin: 40rpx 0;
			}
			.address{
				.add-top{
					font-family: DINAlternate, DINAlternate;
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
					line-height: 32rpx;
					text-align: left;
					font-style: normal;
				}
				.add-bottom{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
					line-height: 28rpx;
					text-align: left;
					font-style: normal;
					margin-top: 15rpx;
				}
			}
		}
		
	}
	.orderInfo{
		width: 100%;
		padding: 0 40rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 24rpx;
		.inps{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 40rpx 0;
			border-bottom: 1rpx solid #EEEEEE;
			.key{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 28rpx;
				text-align: left;
				font-style: normal;
			}
			.value{
				font-family: DINAlternate, DINAlternate;
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
				line-height: 28rpx;
				text-align: right;
				font-style: normal;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				.copy{
					width: 24rpx;
					height: 24rpx;
					margin-left: 16rpx;
				}
			}
		}
	}

	.btns{
		margin: 32rpx 0;
		display: flex;
		justify-content: space-around;
		.btn{
			width: 180rpx;
			height: 68rpx;
			border:1rpx solid #1AA261;
			border-radius: 44rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #1AA261;
			line-height: 68rpx;
			text-align: center;
			font-style: normal;
		}
	}
}
</style>
